<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>超市收银系统</title>
    <link type="text/css" rel="stylesheet" href="fontsawesome/css/font-awesome.css"/>
    <link type="text/css" rel="stylesheet" href="/css/dang.css"/>
</head>
<style type="text/css">

.col>th {
    border: 1px solid #d6dfe6;
    background: linear-gradient(to bottom, #f3f8fc, #ebf4f9, #e3f1fa, #e0f0fd, #d8e9fd);
}
.firstTr>th {

}

    .tab {
        line-height: 40px;
        font-size: 35px;
        margin: 20px 10px;

    }
.tab span {
    background-color: rgba(255, 236, 7, 0.35);
    border-bottom: 1px solid rgba(69, 42, 255, 0.45);

}

    .recharge input[type="button"]{
        width: 15%;
        font-size: 25px;
        background-color: rgba(10, 94, 182, 0.42);
    }
    .recharge input[value="余额充值"]{
        position:absolute;
        margin: 0;
        right:1%;
    }
</style>
<body>
<div class="tab">
 当前余额为: <span th:text="${balance }"></span> &nbsp;元&nbsp;
</div>


<table class="providerTable" cellpadding="0" cellspacing="0">
    <tr class="col">
        <th width="35%" ><span></span></th>
        <th width="35%" class="bot">余额信息表<span></span></th>
        <th width="30%"></th>
    </tr>

    <tr class="firstT">
        <th width="35%" class="order" role="time">时间<span></span></th>
        <th width="35%" class="order" role="balance">余额<span></span></th>
        <th width="30%">操作</th>
    </tr>

    <tr th:each="t,line : ${paBalance.items}">
        <td><span  th:text="${#dates.format(t.time, 'yyyy-MM-dd HH:mm:ss')}"></span></td>
        <td><span th:text="${t.balance }"></span>&nbsp;&nbsp;元</td>
        <td th:id="${t?.id}">
            <span>
					<a class="deleteCon" href="javascript:void(0)">删除
					</a>
				</span>
        </td>
    </tr>
</table>

<div class="page-bar">
    <ul class="page-num-ul clearfix">
        <li th:object="${paBalance}">
            <span th:text="|共 *{count}  条记录|"></span>
            <span th:text="|*{curr}/*{total}|"></span>
        </li>
        <li><a href="javascript:void(0)">首页</a></li>
        <li><a href="javascript:void(0)">上一页</a></li>
        <li><a href="javascript:void(0)">下一页</a></li>
        <li><a href="javascript:void(0)">尾页</a></li>
        <li><span class="page-go-form">
			<label>跳转至</label>
			<input type="text" name="inputPage" id="inputPage" class="page-key"
                   th:value="${paBalance?.curr }"/>页
			<button type="button" class="page-btn">GO</button>
		</span>
        </li>
    </ul>
</div>
<div class="recharge">
    <input type="button"  value="余额充值"  >
</div>

</body>
<script src="/js/jquery-2.2.1.min.js"></script>
<script src="/js/jump.js"></script>
<script type="text/javascript" th:inline="javascript">


    var curr = [[${paBalance?.curr ?: 1}]];
    var total = [[${paBalance?.total ?: 0}]];

    // alert(curr + " : " + total)

    //判断, 是否是第一页
    if(curr == 1){
        $(".page-num-ul a:lt(2)").hide();
    }
    //判断, 是否是最后一页
    if(curr == total){
        $(".page-num-ul a:gt(1)").hide();
    }



    $(".page-num-ul a:eq(0)").bind("click", function() {
        location = "/bal/query?"+"&curr=1"
    });
    $(".page-num-ul a:eq(1)").bind("click", function() {

        location = "/bal/query?"+"&curr=[[${paBalance.curr-1}]]"


    });
    $(".page-num-ul li a:eq(2)").bind("click", function() {

        location = "/bal/query?"+"&curr=[[${paBalance.curr+1}]]"
    });
    $(".page-num-ul a:eq(3)").bind("click", function() {
        location = "/bal/query?"+"&curr=[[${paBalance.total}]]"
    });
    $(".page-go-form .page-btn").bind("click", function() {
        //获取跳转目标页码
        var target = $(".page-go-form .page-key").val();

        //判断, target的值是否符合数值格式
        if(!/^\d+$/.test(target)) {
            $(".page-go-form .page-key").val(curr);
            return;
        }
        //判断, target是否在合理的范围内
        if(target == curr || target < 1 || target > total){
            $(".page-go-form .page-key").val(curr);
            return;
        }
        //跳转
        location = "/bal/query?"+"&curr="+target
    });




    $(".deleteCon").bind("click", function () {

        var id = $(this).parent().parent().attr("id");

        if(!confirm("确定删除此次"+id+"余额吗?")) return;
        location = "/bal/remove?"+"id="+id
    });
    $(".recharge :button[value='余额充值']").bind("click", function() {
        location = "/balAdd"
    });
</script>

</html>